<template>
  <div>
    <Row :gutter="20" style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 10px">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`"
             style="height: 120px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style" style="font-size:40px;font-weight: bold"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="用户喜好情况"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
        </Card>
      </i-col>
    </Row>
    <h3 style="text-align: center;font-weight: bold;font-size: 30px">周收益情况</h3>
    <Row>
      <Card shadow>
        <example style="height: 310px;"/>
      </Card>
    </Row>
    <!--    <button @click="testForAPI">test</button>-->
  </div>
</template>

<script>

import InforCard from '../components/info-card'
import CountTo from '../components/count-to'
import { ChartPie, ChartBar } from '../components/charts'
import Example from './example'
import Tables from '../components/tables'

export default {
  name: "Index",
  components: {
    Tables,
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data() {
    return {
      inforCardData: [
        { title: '今日新增用户', icon: 'md-person-add', count: 23, color: '#2d8cf0' },
        { title: '累计浏览', icon: 'md-locate', count: 1232, color: '#19be6b' },
        { title: '客户反馈', icon: 'md-help-circle', count: 30, color: '#ff9900' },
        { title: '今日新增订单', icon: 'md-chatbubbles', count: 53, color: '#E46CBB' },
        { title: '今日收益额', icon: 'md-map', count: 1252, color: '#9A66E4' }
      ],
      pieData: [
        { value: 325, name: '卤肉蛋面' },
        { value: 225, name: '烤肉拌饭' },
        { value: 360, name: '螺蛳粉' },
        { value: 150, name: '麻婆豆腐' },
        { value: 230, name: '招牌猪蹄' }
      ],
      barData: {
        Mon: 825,
        Tue: 723,
        Wed: 760,
        Thu: 742,
        Fri: 785,
        Sat: 1230,
        Sun: 1360
      }
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.count-style{
  font-size: 50px;
}
</style>

